<template>
	<el-dialog :close-on-click-modal="false" :title="parameter.id ? '查看图片' : '上传图片'" :visible.sync="show" v-if="show"
	 width="400px" v-loading="loading">
		<el-form ref="form" :model="request.data" :inline="true" label-width="80px" :rules="rules">
			<el-upload class="upload-demo" :action="serviceurl+uploadpath" :on-success="success" :headers="headers" :on-preview="handlePreview"
			 :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
				<el-button size="small" type="primary" v-if="parameter.id">更换图片</el-button>
				<el-button size="small" type="primary" v-else>点击上传</el-button>
				只能上传jpg/png文件，且不超过500kb
			</el-upload>
			<el-dialog :visible.sync="dialogVisible">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
			<br>
			<center><img width="100%" height="100%" id="picture" :src="url" v-if="url" /></center>
		</el-form>

		<div class="dialog-footer">
			<br>
			<center>
				<el-button @click="show = false">关 闭</el-button>
			</center>
		</div>
	</el-dialog>
</template>

<script>
	import utils from 'util/utils.js';
	import validate from 'util/validate.js';
	import api from 'api/dishes/dishes/dishes.js';
	import constant from 'util/constant.js';
	import caches from 'util/caches.js';

	export default {
		name: 'edit',
		data() {
			return {
				dialogImageUrl: '',
				dialogVisible: false,
				url: '',
				fileList: [],
				disabled: false,
				loading: false,
				uploadpath: '/fileUpload',
				serviceurl: constant.serverUrl,
				show: this.isDisplay,
				request: utils.newRequest(),
				rules: {
					state: [{
						validator: validate.required,
						trigger: 'blur'
					}],
				}
			};
		},
		methods: {

			success(response) {
				console.log(response);
				this.url = response.data;
				console.log(this.request + "&pic=" + this.url)
				this.loading = true;
				this.request.data.pic = this.url;
				if (this.parameter.id) {
					this.request.data.id = this.parameter.id;
				} else {
					this.request.data.id = constant.cacheskey.picId;
				}
				console.log(this.request.data.id)
				//编辑
				api.update(
					this.request,
					response => {
						this.loading = false;
						utils.msg.success(response.msg);
						this.show = false;
						this.$parent.list(this.$parent.request);
					},
					response => {
						this.loading = false;
						utils.msg.warning(response.msg);
					}
				);

			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
				this.url = '';
				fileList = [];
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				this.url = '';
				fileList = [];
				// return this.$confirm(`确定移除 ${ file.name }？`);
			},



			//提交表单
			submitForm(formName) {
				utils.checkForm(this.$refs[formName], () => {
					this.loading = true;
					if (this.parameter.id) {
						//编辑
						api.updatePic(
							this.request,
							response => {
								utils.msg.success(response.msg);
								this.loading = false;
								this.show = false;
								this.$parent.list(this.$parent.request);
							},
							response => {
								utils.msg.warning(response.msg);
								this.loading = false;
							}
						);
					} else {
						//添加
						api.save(
							this.request,
							response => {
								utils.msg.success(response.msg);
								this.loading = false;
								this.show = false;
								this.$parent.list(this.$parent.request);
							},
							response => {
								utils.msg.warning(response.msg);
								this.loading = false;
							}
						);
					}
				});
			},
			init() {
				this.request = utils.newRequest();
				if (this.parameter.id) {
					//编辑
					this.request.param.id = this.parameter.id;
					api.toUpdate(this.request, response => {
						this.request.data = response.data;
					});
				} else {
					//添加
				}
			},
			/* test */
			//上传文件，获取文件流
			handleFileChange(file) {
				console.log(file);
				this.file = file.raw
			},
			handleRemove(file, fileList) {
				this.file = '';
			},
			beforeUpload(file) {

			},
			submitUpload() {
				if (this.file != '') {
					this.$refs.uploadForm.submit();
				} else {
					this.$message({
						message: '请先选择文件!',
						type: 'warning',
						duration: '2000'
					});
				}
			},


		},
		props: {
			isDisplay: {
				type: Boolean,
				default () {
					return false;
				}
			},
			parameter: {
				type: Array | Object,
				default () {
					return {};
				}
			}
		},
		computed: {
			headers() {
				return {
					"jwttoken": caches.token.get() // 直接从本地获取token就行
				}
			}
		},
		watch: {
			isDisplay(val) {
				this.show = val;
				if (val) {
					this.init();
				}
			},
			show(val) {
				console.log(this.parameter.id)
				console.log(constant.cacheskey.picId)
				this.request = utils.newRequest();
				if (this.parameter.id) {
					//编辑
					this.request.param.id = this.parameter.id;
					api.toUpdate(this.request, response => {
						this.request.data = response.data;
						console.log(this.request.data.pic)
						this.url = this.request.data.pic;
					});
				} else {
					//添加
					this.url = this.serviceurl + '/upload/foods/gg.png';
				}

				this.$emit('update:isDisplay', val);
			},
			parameter(val) {
				this.parameter = val;
			}
		}
	};
</script>

<style lang="scss">
	@import '~common/custom/css/common.scss';
</style>
